import SEO from '../components/SEO'

<SEO
  title="Responsive Styles"
  description="Chakra UI support responsive styles out of the box."
/>

# Responsive Styles


Chakra UI Vue supports responsive styles out of the box. Instead of manually adding
`@media` queries and adding nested styles throughout your code, Chakra UI allows
you provide array values to add mobile-first responsive styles.

<carbon-ad />

> We use the `@media(min-width)` media queries to ensure values are
> mobile-first.

Responsive syntax relies on the breakpoints defined in the theme object. Chakra
UI provides default breakpoints, here's what it looks like:

```js
const breakpoints = {
  sm: '30em', // 480px upwards
  md: '48em', // 768px upwards
  lg: '62em', // 992px upwards
  xl: '80em', // 1280px upwards
  '2xl': '96em' // 1536px upwards
}
```

To make styles responsive, you can use either the array or object syntax.

## The Array syntax

All style props accept arrays as values for mobile-first responsive styles. This
is the recommended method.

```vue
<template>
  <c-box
    height="40px"
    bg="green.400"
    :width="[
      '100%', // base
      '50%', // 480px upwards
      '25%', // 768px upwards
      '15%', // 992px upwards
    ]"
  />
  <!-- responsive font size -->
  <c-box :fontSize="['sm', 'md', 'lg', 'xl']">Font Size</c-box>
  <!-- responsive margin  -->
  <c-box :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
  <!-- responsive padding -->
  <c-box bg="papayawhip" :p="[2, 4, 6, 8]">
    Padding
  </c-box>
</template>
```


This works for every style props in the theme specification, which means you can
change the style of most properties at a given breakpoint.

## What it does

This shortcut is an alternative to writing media queries out by hand. Given the
following:

```vue
<c-box :width="['100%', 1 / 2, 1 / 4]" />
or
<c-box :width="['100%', 0.5, 0.25]" />
```


It'll generate a CSS that looks like this

```css
.Box {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box {
    width: 25%;
  }
}
```

___NOTE___: In the shortcut example `'100%'` is used instead of `1` because in the default Chakra UI Vue theme, `theme.sizes[1] = 0.25rem`. This means that using a prop like `:width="1"` will render a width of 4px and not `'100%'`

To interpret array responsive values, Chakra UI converts the values defined in `theme.breakpoints`
and sorts them in ascending order. Afterward, we map the
values defined in the array to the breakpoints

```js
// This is the default breakpoint
const breakpoints = {
  sm: '30em',
  md: '48em',
  lg: '62em',
  xl: '80em',
  '2xl': '96em'
}

// Internally, we transform to this
const breakpoints = ['0em', '30em', '48em', '62em', '80em', '96em']
```

Here's how to interpret this syntax:

- `300px`: From `0em` upwards
- `400px`: From `30em` upwards
- `500px`: From `48em` upwards

> To skip certain breakpoints, you can pass `null` to any position in the array
> to avoid generating unnecessary CSS.

## The Object syntax

You can also define responsive values with breakpoint aliases in an object. Any
undefined alias key will define the base, non-responsive value.

Let's say you have a `CText` that looks like this:

```vue live=false
<c-text font-size='40px'>This is a text</c-text>
```

To make the `fontSize` responsive using the object syntax, here's what you need
to do:

```vue live=false
<c-text :font-size="{ base: '24px', md: '40px', lg: '56px' }">
  This is responsive text
</c-text>
```

> **Remember, Chakra UI uses the min-width media query for responsive design**.
> The breakpoints are: `sm = 30em`, `md = 48em`, `lg = 62em`, `xl = 80em`

Here's how to interpret this syntax:

- `base`: From `0em` upwards
- `md`: From `48em` upwards
- `lg`: From `62em` upwards

## Customizing Breakpoints

In some scenarios, you might need to define custom breakpoints for your
application. We recommended using common aliases like `sm`, `md`, `lg`, and
`xl`.

To define custom breakpoints, pass them as an object containing the aliases.

> Note: Ensure the css unit of your breakpoints are the same. Use all `px` or
> all `em`, don't mix them.

```js
// 1. Import the utilities
import { extendTheme } from '@chakra-ui/vue'

// 2. Update the breakpoints as key-value pairs
const customBreakpoints = {
  sm: '320px',
  md: '768px',
  lg: '960px',
  xl: '1200px',
  '2xl': '1536px'
}

// 3. Extend the theme
Vue.use(Chakra, {
  extendTheme: {
    breakpoints: customBreakpoints
    ...
  }
}

// 4. Now you can use the custom breakpoints
<c-box :width={ base: '100%', sm: '50%', md: '25%' } />
```

> Note: If you're using **pixels** as breakpoint values make sure to **always**
> provide a value for the `2xl` breakpoint, which by its default pixels value is
> **"1536px"**.

## Demo

Here's a simple example of a marketing page component that uses a stacked layout
on small screens, and a side-by-side layout on larger screens **(resize your
browser to see it in action)**:

```vue live=true
<c-box p="4" :display="{ md: 'flex' }">
  <c-box flex-shrink="0">
    <c-image
      rounded="lg"
      :width="{ md: 40 }"
      src="https://bit.ly/2jYM25F"
      alt="Woman paying for a purchase"
    />
  </c-box>
  <c-box :mt="{ base: 4, md: 0 }" :ml="{ md: 6 }">
    <c-text
      font-weight="bold"
      text-transform="uppercase"
      font-size="sm"
      letter-spacing="wide"
      color="vue.600"
    >
      Marketing
    </c-text>
    <c-link
      mt="1"
      display="block"
      font-size="lg"
      line-height="normal"
      color="black"
      font-weight="semibold"
      href="#"
    >
      Finding customers for your new business
    </c-link>
    <c-text mt="2" color="gray.500">
      Getting a new business off the ground is a lot of hard work. Here are five
      ideas you can use to find your first customers.
    </c-text>
  </c-box>
</c-box>
```